import React from 'react';
import { Card, Form, Input, Checkbox, Button, message } from 'antd';
import logo from '@/assets/logo.png';
// 引入scss样式
import './index.scss';
// 引用mobx

import { useStore } from '@/store';
import { useNavigate } from 'react-router-dom';

export default function Login() {
	// mobx中loginStore
	const { loginStore } = useStore();
	// form表单的ref,用于重置
	const formRef = React.useRef(null);
	// navigate
	const navigate = useNavigate();
	const onFinish = form => {
		const { mobile, code } = form;
		loginStore.getToken({
			mobile,
			code,
		});
		// 跳转
		message.success('登录成功');
		setTimeout(() => {
			navigate('/');
		}, 500);
	};
	const onReset = () => {
		formRef.current?.resetFields();
	};
	return (
		<div className="login">
			<Card className="login-container">
				<img className="login-logo" src={logo} alt="" />
				{/* 登录表单 */}
				<Form
					ref={formRef}
					onFinish={onFinish}
					validateTrigger={['onBlur', 'onChange']}
					initialValues={{
						remember: true,
						mobile: '13811111111',
						code: '246810',
					}}
				>
					<Form.Item
						name="mobile"
						rules={[
							{ required: true, message: '请输入手机号' },
							{
								pattern: /^1[3-9]\d{9}$/,
								message: '请输入正确的手机号',
								validateTrigger: 'onBlur',
							},
						]}
					>
						<Input placeholder="请输入账号" value="13811111111" />
					</Form.Item>
					<Form.Item
						name="code"
						rules={[
							{ required: true, message: '请输入密码' },
							{ len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
						]}
					>
						<Input placeholder="password" value="246810" />
					</Form.Item>
					<Form.Item name="remember" valuePropName="checked">
						<Checkbox className="login-checkbox-label">
							我已阅读并同意「用户协议」和「隐私条款」
						</Checkbox>
					</Form.Item>
					<Form.Item className="footerButtonArea">
						<Button
							type="primary"
							htmlType="submit"
							size="large"
							className="leftButton"
						>
							登录
						</Button>
						<Button
							htmlType="button"
							onClick={onReset}
							size="large"
							className="rightButton"
						>
							重置
						</Button>
					</Form.Item>
				</Form>
			</Card>
		</div>
	);
}
